<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link rel="stylesheet" href="../bootstrap.css">
    <script src="../jquery2.1.1.min.js"></script>
    <script src="../bootstrap.js"></script>
</head>
<body>

<table class="table">
    <caption>上下文表格布局</caption>
    <thead>
    <tr style="width: 50px">
        <th >姓名</th>
        <th >年龄</th>
    </tr>
    </thead>

    <tbody class="rol">
    </tbody>
</table>


<script>

    /*内容*/
    var list=[
        {'one':'张三','two':18},
        {'one':'李四','two':19},
        {'one':'王五','two':20},
    ]

    /*bootstrap中的样式*/
    var classname1=['active','success','danger']

    var more='';
    for(var i in list){


/*``是es6中的拼接字符串 比较方便但是兼容性没那么好*/
        more+=`
     <tr class="${classname1[i]}">
        <td>${list[i].one}</td>
        <td>${list[i].two}</td>
    </tr>
`
    }

    $('.rol').append(more);

    /*打印的格式完美*/
    console.log($('.rol')[0].innerHTML)
</script>


</body>
</html>